<template>
  <div class="login-container">
    <form @submit.prevent="login" class="login-form">
      <h2>登录</h2>
      <div class="login-type-selector">
        <button 
          :class="{ active: loginType === 'user' }" 
          @click.prevent="loginType = 'user'">
          用户登录
        </button>
        <button 
          :class="{ active: loginType === 'admin' }" 
          @click.prevent="loginType = 'admin'">
          管理员登录
        </button>
      </div>
      <div class="form-group">
        <label for="username">用户名:</label>
        <input type="text" v-model="username" required />
      </div>
      <div class="form-group">
        <label for="password">密码:</label>
        <input type="password" v-model="password" required />
      </div>
      <button type="submit" class="login-button">登录</button>
      <p v-if="error" class="error-message">{{ error }}</p>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      error: '',
      loginType: 'user' // 默认选择用户登录
    };
  },
  methods: {
    login() {
      // 硬编码的用户名和密码
      const validUser = { username: 'user', password: '123' };
      const validAdmin = { username: 'admin', password: '123' };

      // 验证用户输入
      if (this.loginType === 'user' && this.username === validUser.username && this.password === validUser.password) {
        // 用户登录成功后重定向到用户主页
        this.$router.push({ name: 'UserHome' });
      } else if (this.loginType === 'admin' && this.username === validAdmin.username && this.password === validAdmin.password) {
        // 管理员登录成功后重定向到管理员主页
        this.$router.push({ name: 'AdminHome' });
      } else {
        // 登录失败，设置错误信息
        this.error = '登录失败，请检查用户名和密码';
      }
    }
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 使容器充满整个视口 */
  background-color: #f0f2f5; /* 背景颜色 */
}

.login-form {
  background-color: white; /* 表单背景颜色 */
  padding: 2rem; /* 内边距 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  width: 300px; /* 表单宽度 */
}

h2 {
  margin-bottom: 1rem; /* 标题底部间距 */
  text-align: center; /* 标题居中 */
}

.login-type-selector {
  display: flex; /* 使用 Flexbox 布局 */
  margin-bottom: 1rem; /* 底部间距 */
}

.login-type-selector button {
  flex: 1; /* 按钮均分宽度 */
  padding: 0.5rem; /* 内边距 */
  background-color: #73d0d0; /* 按钮背景颜色 */
  color: white; /* 按钮文字颜色 */
  border: none; /* 去掉边框 */
  border-radius: 4px; /* 圆角 */
  cursor: pointer; /* 鼠标指针样式 */
  transition: background-color 0.3s; /* 背景颜色过渡效果 */
  margin-right: 0.5rem; /* 按钮之间的间距 */
}

.login-type-selector button:last-child {
  margin-right: 0; /* 最后一个按钮不需要右边距 */
}

.login-type-selector button.active {
  background-color: #0056b3; /* 选中状态的背景颜色 */
}

.form-group {
  margin-bottom: 1rem; /* 每个表单组的底部间距 */
}

label {
  display: block; /* 标签块级显示 */
  margin-bottom: 0.5rem; /* 标签底部间距 */
}

input {
  width: 100%; /* 输入框宽度 */
  padding: 0.5rem; /* 内边距 */
  border: 1px solid #ccc; /* 边框 */
  border-radius: 4px; /* 圆角 */
}

.login-button {
  width: 100%; /* 按钮宽度 */
  padding: 0.5rem; /* 内边距 */
  background-color: #007bff; /* 按钮背景颜色 */
  color: white; /* 按钮文字颜色 */
  border: none; /* 去掉边框 */
  border-radius: 4px; /* 圆角 */
  cursor: pointer; /* 鼠标指针样式 */
  transition: background-color 0.3s; /* 背景颜色过渡效果 */
}

.login-button:hover {
  background-color: #0056b3; /* 悬停时的背景颜色 */
}

.error-message {
  color: red; /* 错误信息颜色 */
  margin-top: 1rem; /* 错误信息顶部间距 */
}
</style>